<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initialscale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>

<body>
   <div id="app">
        <!-- 1、简单的列表渲染 -->
        <ul>
            <li v-for="n in 10">{{ n }} </li>
        </ul>
        <ul>
            <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
            <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li> //index为索引值
        </ul>

        <!-- 2、遍历数据列表 -->
        <table border="1">
            <!-- <tr v-for="item in userList"></tr> -->
            <tr v-for="(item, index) in userList">
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
            </tr>
        </table>
   </div>
   <script src="vue.min.js"></script>
   <script>
     new Vue({
         el: '#app',
         data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 4, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
          }
     })
 </script>
</body>

</html>